<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          body{
            width: 100%;
            height: 100%;
            background-image:url(./txt/image/背景1.jpg);
            background-repeat: no-repeat;
            background-size:100% 100vh;
        }
        *{
            list-style: none;
            margin: 0;
            padding:0;
            box-sizing: border-box;
            text-decoration: none;
        }
        .box{
            width: 800px;
            height: 400px;
            margin:200px auto;
            border: 1px solid #999;
            border-radius: 10px;
            backdrop-filter: blur(8px);
            box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
            border-top: 1px solid rgba(255,255,255,0.8);
            border-left: 1px solid rgba(255,255,255,0.8);
            padding: 10px;
        }
        #zhujia_btn{
        width:100px;
        height: 30px;
        font-size: 15px;
        text-align: center;
        line-height: 30px;
        background-color: skyblue;
        color: #fafafa;
        font-weight: 600;
        border: 0;
        border-radius: 8px;
        margin-top: 20px;
        position: fixed;
        bottom: 10px;
        left: 350px;
        }
        #zhuijia_feedback_p{
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-around;
            line-height: 30px;
            padding:0 150px;
        }
        #userzhuijia_feedback_p{
            width: 100%;

            display: flex;
            justify-content: flex-start;
            margin-bottom: 10px;
        }
        #service_feedback_inp{
            width: 300px;
        }
    </style>
</head>
<script src="./txt/js/axios.js"></script>
<body>
    <div class="box">
<ul id="ul_feedback">

</ul>
<button id="zhujia_btn">返回反馈</button>
    </div>
<script>
 const ul_feedback = document.getElementById('ul_feedback')
 const btn = document.querySelector('#zhujia_btn')
 const zhuijia_feedback_btn = document.getElementById('zhuijia_feedback_btn')
    var arr= JSON.parse(localStorage.getItem('data'))
    setTimeout(function(){
           for(let i=0;i<arr.length;i++){
    let li = document.createElement('li')
ul_feedback.appendChild(li).innerHTML = '<div><span>产品名称:&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>'+arr[i].productname
    +'</strong><br><span>反馈类型:&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>'+arr[i].feedback
    +'</strong><br><span>具体描述:&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>'+arr[i].text
    +'</strong><p id="serve_return_p" style="opacity:0;"><span>客服反馈:&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>'+arr[i].servicereturn
    +'</strong></p><p id="userzhuijia_feedback_p" style="opacity:0;"><span>追加评论:&nbsp;&nbsp;&nbsp;&nbsp;</span><input type="text" id="service_feedback_inp" style = "display:block;"><span id="service_feedback_span" style = "diaplay:none; font-weight:600"></p>'
    +'<p id="zhuijia_feedback_p"><button id="zhuijia_feedback_btn">追加评论</button><button id="fabu_feedback_btn">发表评论</button></p></div><br><hr>'
    }
    })
 fun()
   

btn.addEventListener('click',function(){
    window.location.href='./comment.html'
})
function fun(){
    setTimeout(function(){
        const serve_return_p = document.querySelectorAll('#serve_return_p')
        const userzhuijia_feedback_p = document.querySelectorAll('#userzhuijia_feedback_p')
        const zhuijia_feedback_btn = document.querySelectorAll('#zhuijia_feedback_btn')
        const service_feedback_inp = document.querySelectorAll('#service_feedback_inp')
        const service_feedback_span =document.querySelectorAll('#service_feedback_span')
        const fabu_feedback_btn = document.querySelectorAll('#fabu_feedback_btn')
        for(let i=0;i<serve_return_p.length;i++){
       if(arr[i].servicereturn !== null){
        serve_return_p[i].style.opacity = 1;
       }
zhuijia_feedback_btn[i].addEventListener('click',function(){
    userzhuijia_feedback_p[i].style.opacity = 1;
    service_feedback_inp[i].style.display = 'block'
    service_feedback_span[i].style.display = 'none'
})
fabu_feedback_btn[i].addEventListener('click',function(){
    let id = arr[i].id
    let num = arr[i].message
    service_feedback_inp[i].style.display = 'none'
    service_feedback_span[i].style.display = 'block'
    service_feedback_span[i].innerHTML = service_feedback_inp[i].value
    let content = service_feedback_inp[i].value
    axios({
            url:'http://127.0.0.1:8080/addfeedback',
            method:'post',
            data:{
              id:id,
              addtofeedback:content,
              usernum:num
            }
        })
    })
}
},100)
}



</script>
</body>
</html>